<!--
 * @Descripttion: 封装动态表头
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 17:35:37
 * @LastEditors: younghxp
 * @LastEditTime: 2022-02-24 10:30:45
-->
<template>
  <el-table-column
    :prop="col.prop"
    :fixed="
      col.prop === 'date' || col.prop === 'name' || col.prop === 'areaName'
    "
    :width="col.prop === 'date' ? 500 : 220"
    :label="col.label"
    v-if="col.isShow"
    :align="
      col.prop == 'name' &&
      (mark == 'networkAllItem' || mark == 'networkStartedItem')
        ? left
        : center
    "
    :formatter="formatTd"
  >
    <template slot-scope="scope">
      <div
        v-if="
          col.prop == 'name' &&
          (mark == 'networkAllItem' || mark == 'networkStartedItem')
        "
      >
        <span>{{
          scope.row[scope.column.property]
            ? scope.row[scope.column.property]
            : '--（未选择网点）'
        }}</span>
      </div>
      <div v-else>
        <span>{{
          scope.row[scope.column.property] !== 0
            ? scope.row[scope.column.property] || '--'
            : 0
        }}</span>
      </div>
    </template>
    <template v-if="col.children">
      <el-table-column
        v-for="(items, indexs) in activeUser"
        :key="indexs"
        :min-width="
          items.prop === 'industryName' || items.prop === 'investmentName'
            ? 150
            : 270
        "
        :filterField="
          items.prop === 'industryName'
            ? industryNameList
            : false || items.prop === 'investmentName'
            ? investmentNameList
            : false
        "
        :filter-multiple="false"
        :prop="items.prop"
        :sortable="
          ['industryName', 'investmentName', 'areaName'].includes(items.prop) ||
          RegExp(/Scale/).test(items.prop)
            ? false
            : true
        "
        :column-key="items.prop"
        :formatter="formatTd"
      >
        <template slot="header" slot-scope="scope">
          <div
            v-if="items.prop == 'accountAllocatedCount'"
            style="text-align: center; display: inline-block"
          >
            <span v-html="items.label"></span>
          </div>
          <div
            v-else-if="items.prop == 'accountAllocatedCountScale'"
            style="text-align: center; display: inline-block"
          >
            <span v-html="items.label"></span>
          </div>
          <div
            v-else-if="items.prop == 'depositWorkableProjectCount'"
            style="text-align: center; display: inline-block"
          >
            <span>{{ items.label }}</span>
            <el-tooltip
              content="Right center"
              placement="top-start"
              effect="dark"
              v-if="isWhUser()"
            >
              <div slot="content">已缴存/已生效/已失效/已归还项目数</div>
              <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip>
          </div>
          <div
            v-else-if="items.prop == 'depositWorkableProjectCountScale'"
            style="text-align: center; display: inline-block"
          >
            <span>{{ items.label }}</span>
            <el-tooltip
              content="Right center"
              placement="top-start"
              effect="dark"
              v-if="isWhUser()"
            >
              <div slot="content">已缴存/已生效/已失效/已归还项目比例</div>
              <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip>
          </div>
          <div v-else style="text-align: center; display: inline-block">
            <!-- {{items.label}} -->
            <span v-if="items.label.length < 11">{{
              items.label.substring(0, 10)
            }}</span>
            <span v-else>
              <span>{{
                items.label.substring(0, items.label.length / 2)
              }}</span>
              <br /><span>{{
                items.label.substring(
                  items.label.length / 2,
                  items.label.length
                )
              }}</span>
            </span>
          </div>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.column.property == 'areaName'">{{
            scope.row[scope.column.property]
              ? scope.row[scope.column.property]
              : ''
          }}</span>
          <span v-else>{{
            scope.row[scope.column.property] !== 0
              ? scope.row[scope.column.property] || '--'
              : 0
          }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'MyColumn',
  props: {
    col: {
      type: Object,
    },
    mark: {
      type: String,
    },
  },
  data() {
    return {
      investmentNameList: [
        { value: 'GOV', text: '政府投资' },
        { value: 'GOV_AND_SOCIETY', text: '政府与社会共筹' },
        { value: 'NATIONAL', text: '国企项目' },
        { value: 'NOT_GOV', text: '非政府投资' },
        { value: 'OTHERS', text: '其他工程项目' },
      ],
      // 比例不排序
      propEnum: [
        'industryName',
        'investmentName',
        'areaName',
        'projectRealNameScale',
        'startContractSignedScale',
        'contractSalaryPayScale',
        'projectAttScale',
        'attSalaryPayScale',
        'projectAccountScale',
        'accountProjectCountWhScale',
        'startAccountSignedScale',
        'startAccountDepositedScale',
        'accountAllocatedCountScale',
        'projectSalaryPayScale',
        'startSalaryPeopleIdScale',
        'startPayPeopleIdScale',
        'startPSScale',
        'startSecurityDepositScale',
        'depositWorkableProjectCountScale',
        'depositFundCountScale',
        'bzjYhbhDatestartCountScale',
        'bzjYhbhDateendCountScale',
        'bzjYzbdDatestartCountScale',
        'bzjYzbdDateendCountScale',
        'bzjBxbdDatestartCountScale',
        'bzjBxbdDateendCountScale',
      ],
    }
  },
  computed: {
    activeUser: function () {
      const vm = this
      if (vm.col.children) {
        let users = vm.col.children
        return users.filter(function (user) {
          return user.isShow
        })
      }
    },
    industryNameList: function () {
      const vm = this
      let users = vm.$store.state.industryOptions
      let arr = []
      for (let item of users) {
        let obj = {
          value: '',
          text: '',
        }
        obj.value = item.code
        obj.text = item.name
        arr.push(obj)
      }
      return arr
    },
  },
}
</script>
<style scoped></style>
